html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
}
@keyframes fadeIn {
    0% {opacity:0; top:60%}
    50%{top:51%}
    100% {opacity:1; top:50%}
}
@keyframes fadeOut {
    0% {opacity:1; top:50%; right:1%}
    100% {opacity:0; right:-15%;}
}
#container{
    position:absolute;
    top:50%;
    right:1%;
    /* width:15%; */
    max-width:25%;
    transform: translateY(-50%);
   
}
.fadeIn{
    animation: fadeIn ease 1s forwards;
}
.fadeOut{
    animation: fadeOut ease 1s forwards;
}
#box{
    width:100%;
    background: linear-gradient(180deg, rgb(0, 153, 255) 0%, rgb(50, 173, 255) 100%);
    border-radius:5px;
    
}
#box:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-right-color: rgb(20, 143, 225);
	border-left: 0;
	margin-top: -8px;
	margin-left: -8px;
}

#title, #text{
    width:calc(100% - 20px);
}
#text{
    padding:10px;
    color:#fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-size:16px;
    text-align:center;
}